<template>
  <div class="container">
    <div class="search-box">
      <el-button type="primary" size="small" @click="publish()">发布</el-button>
      <span class="margin-left-m">知识标题:</span>
      <el-input
        v-model="searchForm.knowTitle"
        placeholder="请输入搜索的知识标题"
        style="width: 200px"
        class="margin-left-m"
        size="small"
      />
      <el-button
        class="margin-left-m"
        type="primary"
        size="small"
        @click="getAllKnowList()"
      >检索</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
      <el-table-column prop="knowTitle" label="知识标题" align="center" />
      <el-table-column prop="knowCateName" label="知识类别" align="center" />
      <el-table-column prop="knowState" label="状态" align="center">
        <template slot-scope="scope">
          <span
            :class="{
              danger: scope.row.knowState === 1,
              warning: scope.row.knowState === 2 || scope.row.knowState === 5,
              success: scope.row.knowState === 3,
              primary: scope.row.knowState === 0,
            }"
          >{{ scope.row.knowState | knowStateFilter }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="auditUser" label="审查人" /> -->
      <el-table-column prop="staffCode" label="发布人" align="center" />
      <el-table-column label="操作" width="300" align="left">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="info"
            plain
            @click="handleRead(scope.row)"
          >详情</el-button>
          <el-button
            v-if="scope.row.knowState === 4"
            size="mini"
            type="primary"
            plain
            @click="handleLabel(scope.row)"
          >打标</el-button>
          <el-button
            v-if="scope.row.knowState === 4"
            size="mini"
            type="primary"
            plain
            @click="handleFinishLabel(scope.row)"
          >打标完成</el-button>
          <el-button
            v-if="scope.row.knowState === 0"
            size="mini"
            plain
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            v-if="scope.row.knowState === 0"
            size="mini"
            type="warning"
            plain
            @click="handleCheckKnow(scope.row)"
          >形式审查</el-button>
          <el-button
            v-if="scope.row.knowState !== 3"
            size="mini"
            type="danger"
            plain
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page.sync="searchForm.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="searchForm.pageSize"
        layout="sizes, total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="70%">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="知识标题" prop="knowTitle">
          <el-input v-model="form.knowTitle" placeholder="请输入知识标题" />
        </el-form-item>
        <el-form-item label="知识类别" prop="knowCateId">
          <el-cascader
            v-model="form.knowCateId"
            style="width: 100%"
            :options="knowCateOptions"
            placeholder="请选择知识类别"
            :props="{ checkStrictly: true }"
            clearable
          />
        </el-form-item>
        <el-form-item label="知识内容" prop="knowContent">
          <vue-editor v-model="form.knowContent" placeholder="请输入知识内容" />
        </el-form-item>
        <el-form-item v-if="dialogTitle == '发布知识'" label="附件">
          <el-upload
            style="width: 40vw"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-change="fileChange"
            :http-request="httpRequest"
            :limit="10"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            action="#"
            list-type="text"
            :auto-upload="false"
          >
            <el-button
              size="small"
              type="primary"
              icon="el-icon-upload"
            >上传附件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item v-else label="附件">
          <el-upload
            style="width: 40vw"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :http-request="uploadFile"
            :limit="10"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            action="#"
            :show-file-list="false"
          >
            <el-button
              size="small"
              type="primary"
              icon="el-icon-upload"
            >上传附件</el-button>
          </el-upload>
          <div
            v-for="(file, fileIndex) in editFileList"
            :key="fileIndex"
            class="file-box"
          >
            <div>{{ file.fileName }}</div>
            <div>
              <el-button
                type="danger"
                size="mini"
                style="margin-left: 10px"
                @click="deleteFile(file)"
              >删除</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addKnow()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="打标" :visible.sync="labelVisible" width="90%">
      <div class="label-box">
        <div style="width: 50%">
          <div style="text-align: center; font-size: 18px; font-weight: bold">
            {{ row.knowTitle }}
          </div>
          <div
            id="labelContent"
            class="label-content"
            @mouseup.stop="highlight($event)"
            v-html="content"
          />
        </div>
        <div class="right-label-box">
          <el-table :data="labelData">
            <el-table-column prop="labelName" label="标签">
              <template slot-scope="scope">
                <div class="label-name-box">
                  <div
                    class="label-name-color-box"
                    :style="{ 'background-color': scope.row.labelColor }"
                  />
                  <div>
                    {{ scope.row.labelName }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="lblContent" label="标注内容" width="200">
              <template slot-scope="scope">
                <div class="lbl-content-box" :title="scope.row.lblContent">
                  {{ scope.row.lblContent }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createtime" label="打标时间" />
            <el-table-column prop="" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="small"
                  plain
                  @click="deleteLabel(scope.row.knowLblDtlId)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            :current-page.sync="labelTable.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="labelTable.pageSize"
            layout="sizes, total, prev, pager, next"
            :total="labelTotal"
            @size-change="handleLabelSizeChange"
            @current-change="handleLabelCurrentChange"
          />
        </div>
      </div>
      <div slot="footer">
        <el-button size="small" @click="labelVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="人工打标" :visible.sync="labelDialog" width="30%">
      <el-form
        ref="labelForm"
        :model="labelForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="知识类别" prop="knowCateId">
          <el-cascader
            v-model="labelForm.knowCateId"
            style="width: 100%"
            :options="highlightOptions"
            placeholder="请选择知识类别"
            :props="{ checkStrictly: true }"
            clearable
            @change="handleSelectChange"
          />
        </el-form-item>
        <el-form-item label="标签类型" prop="labelCateId">
          <el-select
            v-model="labelForm.labelCateId"
            placeholder="请选择标签"
            style="width: 100%"
            @change="handleLabelOption"
          >
            <el-option
              v-for="(item, index) in labelOptions"
              :key="index"
              :label="item.labelName"
              :value="item.labelCateId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标签颜色" prop="labelColor">
          <div :style="{ background: color }" class="label-color-box" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="labelDialog = false">取 消</el-button>
        <el-button type="primary" @click="labelSubmit()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="详情" :visible.sync="readDialogVisible" width="70%">
      <div class="detail-box">
        <div>
          知识标题:
          <span class="right-content">{{ detailForm.knowTitle }}</span>
        </div>
        <div>
          知识类别:
          <span class="right-content">{{ detailForm.knowCateName }}</span>
        </div>
        <div class="detail-content-box">
          <div class="detail-content-left">知识内容:</div>
          <div v-if="detailForm.daBiaoContent" class="lbl-content">
            <div
              class="detail-content-right detail-left"
              v-html="detailForm.daBiaoContent"
            />
            <div class="detail-label-box">
              <div
                v-for="(label, labelIndex) in detailForm.itemDetails"
                :key="labelIndex"
                :style="{ border: '1px solid' + label.labelColor }"
                class="detail-label-item-box"
                @click="clickLabel(label)"
              >
                <div class="label-top-box">
                  <div
                    class="label-color-box"
                    :style="{ background: label.labelColor }"
                  />
                  <div>
                    {{ label.labelName }}
                  </div>
                </div>
                <div class="detail-label-content" :title="label.lblContent">
                  {{ label.lblContent }}
                </div>
              </div>
            </div>
          </div>
          <div
            v-else
            class="detail-content-right"
            v-html="detailForm.knowContent"
          />
        </div>
        <div
          v-if="editFileList.length !== 0"
          style="display: flex; margin-top: 10px"
        >
          <div style="margin-right: 10px">附件列表:</div>
          <div>
            <div
              v-for="(file, fileIndex) in editFileList"
              :key="fileIndex"
              class="download-file"
              @click="handleDownload(file)"
            >
              <div>{{ file.fileName }}</div>
              <!-- <div>
              <el-button
                type="danger"
                size="mini"
                style="margin-left: 10px"
                @click="deleteFile(file)"
                >删除</el-button
              >
            </div> -->
            </div>
          </div>
        </div>
        <div v-if="editFileList.length == 0" class="margin-top: 10px;">
          暂无附件
        </div>
      </div>
      <div slot="footer">
        <el-button @click="readDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="审查进度"
      :visible.sync="checkDialog"
      width="30%"
      style="margin-top: 15%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div>
        <el-progress
          :percentage="percentage"
          :color="customColorMethod"
        />
      </div>
      <div slot="footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        > -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { getAllKnowList, addKnowAPI, getCategoryAllLevels, updateKnowAPI, deleteKnowAPI, getKnowLabel, insertKnowLabel, getLabelsDetails, updateKnowLabel, DeleteByknowLblDtlId, CheckKnowMain, getByKnowId, getFilesByKnowId, addFiles, deleteByarchFilesId, getCategorySingleLevels, getLabelsByKnowCateId } from '@/api/knowMan'
import { VueEditor } from 'vue2-editor'
export default {
  filters: {
    knowStateFilter: function(value) {
      if (value === 1) { return '形式审查未通过' }
      if (value === 2) { return '打标不规范' }
      if (value === 3) { return '审核通过' }
      if (value === 0) {
        return '待形式审查'
      }
      if (value === 4) {
        return '待打标'
      }
      if (value === 5) {
        return '打标完成待审核'
      }
      return value
    }
  },
  // 2、添加组件
  components: {
    VueEditor
  },
  data() {
    return {
      tableData: [],
      searchForm: {
        pageSize: 10,
        pageNum: 1,
        knowTitle: '',
        staffCode: ''
      },
      total: 0,
      dialogVisible: false,
      dialogTitle: '',
      form: {
        knowTitle: '',
        knowContent: '',
        knowCateId: '',
        staffCode: '',
        type: 0
      },
      labelForm: {
        // knowCateId: "",
        knowLblId: '',
        labelCateId: '',
        lblContent: ''
      },
      fileList: [],
      rules: {
        knowTitle: [
          { required: true, message: '请输入知识标题', trigger: 'blur' }
        ],
        knowContent: [
          { required: true, message: '请输入知识内容', trigger: 'blur' }
        ],
        knowCateId: [
          { required: true, message: '请选择知识类别', trigger: 'change' }
        ],
        labelCateId: [
          { required: true, message: '请选择标签类型', trigger: 'change' }
        ]
      },
      knowCateOptions: [],
      labelVisible: false,
      row: {},
      labelDialog: false,
      labelOptions: [],
      color: '',
      labelData: [],
      range: '',
      content: '',
      readDialogVisible: false,
      detailForm: {
        daBiaoContent: ''
      },
      editFileList: [], // 编辑框的附件列表
      highlightOptions: [],
      labelTable: {
        pageNum: 1,
        pageSize: 10
      },
      labelTotal: 0,
      checkDialog: false,
      percentage: 0

    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.staffCode = this.userInfo.username ? this.userInfo.username : this.userInfo.staffCode
    this.searchForm.staffCode = this.staffCode
    this.form.staffCode = this.staffCode
    this.getAllKnowList()
    this.getKnowCategory()
  },
  methods: {
    // 进度条颜色
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#909399'
      } else if (percentage < 70) {
        return '#e6a23c'
      } else {
        return '#67c23a'
      }
    },
    // 进度条增加
    // increase () {
    //   this.percentage += 10;
    //   if (this.percentage > 100) {
    //     this.percentage = 100;
    //   }
    // },
    // 获取发布的知识列表
    getAllKnowList() {
      const param = {
        ...this.searchForm
      }
      getAllKnowList(param)
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.list.records
            this.total = res.list.total
          }
        })
    },
    // 获取知识类别
    getKnowCategory() {
      getCategoryAllLevels().then((res) => {
        if (res.code === 200) {
          this.knowCateOptions = res.list
        }
      })
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      this.getAllKnowList()
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val
      this.getAllKnowList()
    },
    handleLabelSizeChange(val) {
      this.labelTable.pageSize = val
      this.queryTable()
    },
    handleLabelCurrentChange(val) {
      this.labelTable.pageNum = val
      this.queryTable()
    },
    // 点击发布
    publish() {
      this.form = {
        knowTitle: '',
        knowContent: '',
        knowCateId: '',
        staffCode: this.staffCode,
        type: 0
      }
      this.fileList = []
      this.dialogVisible = true
      this.dialogTitle = '发布知识'
    },
    // 找到知识类别的上级数组
    // findParents(data, targetValue, path = []) {
    //   for (const item of data) {
    //     const currentPath = [...path, item.value]
    //     if (item.value === targetValue) {
    //       return currentPath
    //     }
    //     if (item.children && item.children.length > 0) {
    //       const result = findParents(item.children, targetValue, currentPath)
    //       if (result) {
    //         return result
    //       }
    //     }
    //   }
    //   return null
    // },
    // 发布知识
    addKnow() {
      this.$refs.form.validate(async(valid, field) => {
        if (!valid) {
          return this.$message.error({
            message: '请填写完整'
          })
        }
        if (this.dialogTitle === '发布知识') {
          const formData = new FormData()
          // 你可以使用FormData.append来添加键/值对到表单里面；
          this.fileList.forEach((file) => {
            formData.append('files', file.raw)
          })
          formData.append('knowTitle', this.form.knowTitle)
          formData.append('knowCateId', this.form.knowCateId[this.form.knowCateId.length - 1])
          formData.append('staffCode', this.staffCode)
          formData.append('knowContent', this.form.knowContent)
          formData.append('type', this.form.type)
          addKnowAPI(formData).then((res) => {
            if (res.code === 200) {
              this.dialogVisible = false
              this.$message.success('发布成功')
              this.getAllKnowList()
              this.form = {
                knowTitle: '',
                knowContent: '',
                knowCateId: '',
                staffCode: this.staffCode,
                type: 0
              }
              this.fileList = []
            }
          })
          return
        }
        const param = {
          ...this.form
        }
        // 编辑知识
        updateKnowAPI(param).then((res) => {
          if (res.code === 200) {
            this.dialogVisible = false
            this.$message.success('修改成功')
            this.form = {
              knowTitle: '',
              knowContent: '',
              knowCateId: '',
              staffCode: this.staffCode
            }
            this.getAllKnowList()
            this.fileList = []
          }
        }).catch((err) => {
          console.log(err)
        })
      })
    },
    // 超过限制数量
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      )
    },
    // 移除文件钩子
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    beforeUpload(file) {
      // 在上传前执行的逻辑

      // 如果文件大小为0，则禁止上传
      if (file.size === 0) {
        this.$message.error('文件不能为空')
        return false // 阻止上传
      }

      // 如果通过验证，允许上传
      return true
    },
    handleChange(file, fileList) {
      // 手动处理文件列表的更新
      this.fileList = fileList.filter(item => item.size !== 0)
    },
    fileChange(file, fileList) {
      if (file.size === 0) {
        this.$message.warning('该文件为空')
      }
      this.fileList = fileList.filter(item => item.size !== 0)
    },
    // 覆盖默认的上传行为，可以自定义上传的实现，将上传的文件依次添加到fileList数组中,支持多个文件
    httpRequest(option) {
      console.log(option)
    },
    // 上传附件
    uploadFile(info) {
      if (info.file.size === 0) {
        this.$message.warning('该文件为空')
        return
      }
      const { file } = info
      this.file = file
      const formData = new FormData()
      formData.append('file', file)
      formData.append('knowId', this.form.knowId)
      formData.append('staffCode', this.staffCode)
      // 调用上传接口
      try {
        // 调上传接口
        addFiles(formData).then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.$message({
              message: '文件上传成功',
              type: 'success'
            })
            this.getFiles()
          }
        })
      } catch (err) {
        console.log(err)
      }
    },
    // 获取知识的附件
    getFiles() {
      getFilesByKnowId({
        knowId: this.form.knowId
      }).then((res) => {
        this.$set(this, 'editFileList', res.data)
        // this.editFileList = res.data
      })
    },
    // 点击下载附件
    handleDownload(row) {
      axios({
        method: 'post',
        url: '/know-api/knowArchFiles/Download',
        responseType: 'blob',
        params: {
          url: row.fileURL
        }
      }).then((res) => {
        if (res.status === 200) {
          const fileName = row.fileName
          const link = document.createElement('a')
          link.href = window.URL.createObjectURL(res.data)
          link.download = fileName
          link.click()
          window.URL.revokeObjectURL(link.href)
        } else {
          this.$notify.error({
            title: '',
            message: '下载异常'
          })
        }
      })
    },
    // 点击形式审查
    handleCheckKnow(row) {
      this.$confirm('形式审查后将不能再编辑该知识，确定继续吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.checkDialog = true
        this.percentage = 0
        const timer = setInterval(() => {
          if (this.percentage > 100) {
            this.percentage = 100
          }
          if (this.percentage === 100) {
            clearInterval(timer)
            CheckKnowMain({
              knowId: row.knowId
            }).then((res) => {
              this.checkDialog = false
              this.$message.success('形式审查已通过')
              this.getAllKnowList()
            })
            return
          }
          this.percentage += Math.ceil(Math.random() * 10)
        }, 1000)
      })
        .catch((err) => {
          this.$message.warning(err.tip)
        })
    },
    // 点击详情
    handleRead(row) {
      getByKnowId({
        knowId: row.knowId
      }).then((res) => {
        this.readDialogVisible = true
        this.detailForm = { ...res.item }
      }).catch((err) => {
        console.log(err)
      })
      this.getFilesByKnowId(row.knowId)
    },
    // 点击标签
    clickLabel(row) {
      // document.getElementById(row.knowLblDtlId).parentElement.style.fontWeight = 'bold'
      // console.log(document.getElementById(row.knowLblDtlId).parentElement)
    },
    // 点击选择打标签的知识分类选择
    handleSelectChange(val) {
      this.getLabelsByKnowCateId(val[val.length - 1])
      this.$forceUpdate()
    },
    // 点击打标
    handleLabel(row) {
      this.isFirst = true
      this.row = row
      this.labelForm.knowCateId = row.knowCateId
      getCategorySingleLevels({
        knowCateId: row.knowCateId
      }).then((res) => {
        this.highlightOptions = res.list
        // console.log(this.highlightOptions)
      })
      this.queryTable()
      this.getLabelsByKnowCateId(row.knowCateId)
      this.labelVisible = true
    },
    // 根据知识类别获取知识标签
    getLabelsByKnowCateId(id) {
      getLabelsByKnowCateId({
        knowCateId: id
      }).then((res) => {
        this.labelOptions = res.item.list
      }).catch((err) => {
        console.log(err)
      })
    },
    // 点击打标完成
    handleFinishLabel(row) {
      this.$confirm('该知识将进入审核阶段，确定打标完成吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          updateKnowAPI({
            knowId: row.knowId,
            knowState: 5
          }).then((res) => {
            this.$message.success('打标完成')
            this.getAllKnowList()
          })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获取右边标签表格数据
    queryTable() {
      getKnowLabel({
        knowId: this.row.knowId
      }).then((res) => {
        this.labelForm.knowLblId = res.item.knowLblId
        if (this.isFirst) {
          this.content = res.item.lblContent ? res.item.lblContent : this.row.knowContent.replace(/<\/p>|<br\s*\/?>|<[^>]+>/gi, ' ').replace(/^\s+/, '').replace(/\s+/g, '\n')
          this.isFirst = false
        }
        getLabelsDetails({
          knowLblId: res.item.knowLblId,
          ...this.labelTable
        }).then((res) => {
          this.labelData = res.list.records
          this.labelTotal = res.list.total
        })
        return !!res.item.lblContent
      })
    },
    // 选中标注文本
    highlight(e) {
      if (window.getSelection().toString() === '') {
        return
      }
      this.labelDialog = true
      this.selectedContent = window.getSelection()
      this.labelForm.lblContent = window.getSelection().toString()
      this.range = window.getSelection().getRangeAt(0)
    },
    // 点击打标签的确定
    labelSubmit() {
      this.$refs['labelForm'].validate((valid) => {
        if (valid) {
          insertKnowLabel({
            knowLblId: this.labelForm.knowLblId,
            labelCateId: this.labelForm.labelCateId,
            lblContent: this.labelForm.lblContent,
            knowCateId: this.labelForm.knowCateId[this.labelForm.knowCateId.length - 1]
          }).then(res => {
            this.labelDialog = false
            try {
              const span = document.createElement('span')
              span.className = 'highlight'
              const delicon = document.createElement('i')
              delicon.setAttribute('id', res.knowLblDtlId)
              this.range.surroundContents(span)// 把指定节点插入选区的起始位置，然后把指定节点的内容替换为选区的内容。
              const color = this.color
              span.innerHTML = `<em style="background:${color};color:white;margin:0 5px;padding:0 5px;font-style: normal;">${span.innerHTML}`
              span.lastChild.appendChild(delicon)
              window.getSelection().removeAllRanges()
            } catch (e) {
              console.log(e)
            }

            // console.log("span", span.innerHTML)
            const content = document.getElementById('labelContent').innerHTML
            updateKnowLabel({
              knowLblId: this.labelForm.knowLblId,
              lblContent: content
            }).catch((error) => {
              this.$message.error(error.toString())
            })
            this.queryTable()

            this.selectedContent = null
            this.range = null
            this.showDetail = false
            this.$message.success('打标成功')
            this.content = content
            this.labelForm = {
              knowLblId: '',
              labelCateId: '',
              knowCateId: this.row.knowCateId,
              lblContent: ''
            }
          }).catch((error) => {
            this.$message.error(error.toString())
          })
        }
      })
    },
    // 点击选择知识标签
    handleLabelOption(val) {
      this.labelOptions.find((item) => {
        if (item.labelCateId === val) { this.color = item.labelColor }
        return
      })
    },
    // 点击编辑
    handleEdit(row) {
      this.form = {
        knowTitle: row.knowTitle,
        knowContent: row.knowContent,
        knowCateId: row.knowCateId,
        knowId: row.knowId
      }
      this.getFilesByKnowId(row.knowId)
      this.dialogVisible = true
      this.dialogTitle = '编辑知识'
    },
    // 获取知识的附件 knowId
    getFilesByKnowId(id) {
      getFilesByKnowId({
        knowId: id
      }).then((res) => {
        this.editFileList = res.data
      })
    },

    // 点击删除
    handleDelete(row) {
      this.$confirm('你确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteKnowAPI({
            knowId: row.knowId
          }).then((res) => {
            this.$message.success('删除成功')
            this.getAllKnowList()
          })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 删除右边标签
    deleteLabel(id) {
      this.$confirm('你确定要删除吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          try {
            const annotateContent =
              document.getElementById(id).parentNode.parentNode.parentNode
            const span = document.getElementById(id).parentNode.parentNode
            const button = document.getElementById(id).parentNode
            let emtext = ''
            if (span.firstChild.getElementsByTagName('span').length > 0) { // 判断标注内是否还嵌套有标注，有走if，没有走else（其实这里只需要if就可以了，写的时候可以把代码简化一下）
              const kk = span.firstChild.innerHTML
              const newSpan = document.createElement('span')
              newSpan.className = 'tagReplace'
              span.removeChild(button)
              annotateContent.insertBefore(newSpan, span)
              annotateContent.removeChild(span)
              annotateContent.innerHTML = annotateContent.innerHTML.replace('<span class="tagReplace"></span>', kk)
            } else {
              emtext = span.firstChild.innerText.trim()
              span.removeChild(button)
              const textNode = document.createTextNode(emtext)
              annotateContent.insertBefore(textNode, span)
              annotateContent.removeChild(span)
            }
            window.getSelection().removeAllRanges()
          } catch (e) {
            console.log(e)
          }

          const content = document.getElementById('labelContent').innerHTML
          updateKnowLabel({
            knowLblId: this.labelForm.knowLblId,
            lblContent: content
          }).then(res => {
          }).catch((error) => {
            this.$message.error(error.toString())
          })
          DeleteByknowLblDtlId({
            knowLblDtlId: id
          }).then((res) => {
            this.$message.success('删除成功')
            this.queryTable()
          })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    deleteFile(row) {
      this.$confirm('你确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteByarchFilesId({
            archFilesId: row.archFilesId
          }).then((res) => {
            this.$message.success('删除成功')
            this.getFiles()
          }).catch((err) => {
            this.$message.warning(err.tip)
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

  }
}
</script>

<style scoped>
.container {
  padding: 15px;
}
.margin-left-m {
  margin-left: 10px;
}
.pagination {
  width: auto;
  display: flex;
  margin-top: 10px;
  align-items: center;
}
.danger {
  color: #f56c6c;
}
.primary {
  color: #409eff;
}
.success {
  color: #67c23a;
}
.warning {
  color: #e6a23c;
}
.info {
  color: #909399;
}
.search-box {
  display: flex;
  align-items: center;
  color: rgb(96, 98, 102);
  font-size: 15px;
}
div /deep/ .el-dialog {
  margin-top: 40px !important;
  border-radius: 8px;
}
div /deep/ .el-dialog__body {
  padding: 0 25px;
}
.label-box {
  display: flex;
  justify-content: center;
}
.label-content {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #eee;
  padding: 10px;
  margin-top: 10px;
  line-height: 25px;
  font-size: 15px;
  text-indent: 30px;
  white-space: pre-line;
}
#labelContent::before {
  content: "\00a0\00a0";
}
.label-color-box {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #eee;
  margin-top: 3px;
}
.right-label-box {
  width: 49%;
  margin-left: 1%;
  padding: 10px;
}
.lbl-content-box {
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.label-name-box {
  display: flex;
  align-items: center;
}
.label-name-color-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #eee;
  margin-right: 3px;
}
.detail-box {
  font-size: 16px;
  line-height: 30px;
}
.right-content {
  margin-left: 8px;
}
.detail-content-box {
  display: flex;
}
.detail-content-left {
  width: auto;
  white-space: nowrap;
  margin-right: 10px;
}
.detail-content-right {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 7px 10px;
}
.lbl-content {
  display: flex;
}
.detail-left {
  flex: 3;
}
.detail-label-box {
  flex: 1;
  min-width: 200px;
}
.detail-label-item-box {
  padding: 5px 10px;
  border-radius: 10px;
  margin-bottom: 4px;
  margin-left: 10px;
}
.label-top-box {
  display: flex;
  align-items: center;
}
.label-color-box {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  margin-right: 10px;
}
.detail-label-content {
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 13px;
  line-height: 26px;
}

.file-box {
  display: flex;
  align-items: center;
}
.download-file {
  color: #409eff;
  cursor: pointer;
}
</style>
